<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG转PNG工具 - 码农飞哥（VX: 2809641033）</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .icon-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .icon-item {
            text-align: center;
            padding: 20px;
            border: 2px solid #ddd;
            border-radius: 8px;
            background: #fafafa;
        }
        .icon-preview {
            margin-bottom: 15px;
        }
        .icon-preview img {
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        .convert-all {
            text-align: center;
            margin-top: 20px;
        }
        .convert-all button {
            background: #28a745;
            font-size: 16px;
            padding: 15px 30px;
        }
        .convert-all button:hover {
            background: #1e7e34;
        }
        .status {
            margin-top: 20px;
            padding: 10px;
            border-radius: 5px;
            text-align: center;
        }
        .success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
    </style>
</head>
<body>
    <!-- 码农飞哥（VX: 2809641033） -->
    <div class="container">
        <h1>🎨 SVG图标转PNG工具</h1>
        <p style="text-align: center; color: #666; margin-bottom: 30px;">将浏览器插件的SVG图标转换为PNG格式</p>
        
        <div class="icon-grid" id="iconGrid">
            <!-- 图标将通过JavaScript动态加载 -->
        </div>
        
        <div class="convert-all">
            <button onclick="convertAllIcons()">🚀 一键转换所有图标为PNG</button>
        </div>
        
        <div id="status" class="status" style="display: none;"></div>
    </div>

    <script>
        /**
         * SVG转PNG转换器
         * 码农飞哥（VX: 2809641033）
         */
        
        // 图标配置
        const iconSizes = [16, 32, 48, 128];
        
        /**
         * 页面加载完成后初始化
         */
        document.addEventListener('DOMContentLoaded', function() {
            loadIcons();
        });
        
        /**
         * 加载所有SVG图标
         */
        async function loadIcons() {
            const iconGrid = document.getElementById('iconGrid');
            
            for (const size of iconSizes) {
                try {
                    const response = await fetch(`./icons/icon${size}.svg`);
                    const svgText = await response.text();
                    
                    const iconItem = createIconItem(size, svgText);
                    iconGrid.appendChild(iconItem);
                } catch (error) {
                    console.error(`加载icon${size}.svg失败:`, error);
                }
            }
        }
        
        /**
         * 创建图标项目元素
         */
        function createIconItem(size, svgText) {
            const div = document.createElement('div');
            div.className = 'icon-item';
            
            div.innerHTML = `
                <div class="icon-preview">
                    <div style="margin-bottom: 10px;">
                        ${svgText}
                    </div>
                    <div><strong>icon${size}.svg</strong></div>
                    <div style="color: #666; font-size: 12px;">${size}×${size}像素</div>
                </div>
                <button onclick="convertSingleIcon(${size}, \`${svgText.replace(/`/g, '\\`')}\`)">
                    💾 转换为PNG
                </button>
            `;
            
            return div;
        }
        
        /**
         * 转换单个图标为PNG
         */
        function convertSingleIcon(size, svgText) {
            showStatus(`正在转换 icon${size}.svg...`, 'info');
            
            setTimeout(() => {
                svgToPng(svgText, size, size)
                    .then(pngDataUrl => {
                        downloadPng(pngDataUrl, `icon${size}.png`);
                        showStatus(`✅ icon${size}.png 转换成功！`, 'success');
                    })
                    .catch(error => {
                        console.error('转换失败:', error);
                        showStatus(`❌ icon${size}.png 转换失败`, 'error');
                    });
            }, 100);
        }
        
        /**
         * 转换所有图标为PNG
         */
        async function convertAllIcons() {
            showStatus('🚀 开始批量转换所有图标...', 'info');
            
            let successCount = 0;
            let totalCount = iconSizes.length;
            
            for (const size of iconSizes) {
                try {
                    const response = await fetch(`./icons/icon${size}.svg`);
                    const svgText = await response.text();
                    
                    const pngDataUrl = await svgToPng(svgText, size, size);
                    downloadPng(pngDataUrl, `icon${size}.png`);
                    successCount++;
                    
                    showStatus(`✅ 已转换 ${successCount}/${totalCount} 个图标...`, 'info');
                    
                    // 添加小延迟避免浏览器阻塞
                    await new Promise(resolve => setTimeout(resolve, 200));
                } catch (error) {
                    console.error(`转换 icon${size}.svg 失败:`, error);
                }
            }
            
            showStatus(`🎉 批量转换完成！成功转换 ${successCount}/${totalCount} 个图标`, 'success');
        }
        
        /**
         * SVG转PNG核心函数
         */
        function svgToPng(svgText, width, height) {
            return new Promise((resolve, reject) => {
                // 创建图片元素
                const img = new Image();
                
                img.onload = function() {
                    // 创建canvas
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');
                    
                    // 设置canvas尺寸
                    canvas.width = width;
                    canvas.height = height;
                    
                    // 绘制图片到canvas
                    ctx.drawImage(img, 0, 0, width, height);
                    
                    // 转换为PNG数据URL
                    const pngDataUrl = canvas.toDataURL('image/png');
                    resolve(pngDataUrl);
                };
                
                img.onerror = function() {
                    reject(new Error('图片加载失败'));
                };
                
                // 创建SVG的数据URL
                const svgBlob = new Blob([svgText], { type: 'image/svg+xml' });
                const svgUrl = URL.createObjectURL(svgBlob);
                
                img.src = svgUrl;
            });
        }
        
        /**
         * 下载PNG文件
         */
        function downloadPng(dataUrl, filename) {
            const link = document.createElement('a');
            link.download = filename;
            link.href = dataUrl;
            
            // 触发下载
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
        
        /**
         * 显示状态信息
         */
        function showStatus(message, type = 'info') {
            const statusDiv = document.getElementById('status');
            statusDiv.textContent = message;
            statusDiv.className = `status ${type}`;
            statusDiv.style.display = 'block';
            
            // 3秒后自动隐藏成功消息
            if (type === 'success') {
                setTimeout(() => {
                    statusDiv.style.display = 'none';
                }, 3000);
            }
        }
    </script>
</body>
</html>